<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理分组合约</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    
</head>

<body>
    <table class="layui-table" border=1>
        <tr>
            <td>
                分组
            </td>
            <td>
                可编辑的列表(请切换英文输入法小心编辑) / --------请勿删除中括号------
            </td>
            <td>
                功能

            </td>
        </tr>
        {% for k,v in data.items() %}
        <tr>
            <td>
                <h4 id="{{k}}1"></h4>
            </td>
            <td>
                <h3 id="{{ k }}" contenteditable="true">{{v}}</h3>
            </td>
            <td>
                <button class="layui-btn layui-btn-primary" onclick="update_key('{{ k }}')">更新</button>
            </td>
        </tr>
        {% endfor %}
    </table>

    <script>
        window.onload = function () {
            eles = document.getElementsByTagName("h4")
            for (var x in eles) {
                im = eles[x].getAttribute("id")
                
                eles[x].innerHTML = get_chinese(im.replace('1',""))
            }
        }

        function get_chinese(key) {
            var mapping = {
                "METAL_CONTRACT": "有色金属",
                "PRODUCTS_CONTRACT": "农产品",
                "ENERGY_CONTRACT": "能源",
                "GOLD_CONTRACT": "贵金属",
                "CHEMICAL_CONTRACT": "化工产品",
                "MINERALS_CONTRACT": "矿产品",
                "BUILD_CONTRACT": "建材",
                "BANK_CONTRACT": "金融"
            }
            return mapping[key]
        }

        function update_key(key) {
            var value = document.getElementById(key).innerHTML;
            $.ajax({
                url: "{{ url_for('update_key')}}",
                data: { "value": value, "key": key },
                type: "POST",
                dataType: "json",
                success: function (re) {
                    // alert(re.message);
                    alert(re.message)
                },
                error: function (e) {
                    alert(e);
                }
            }
            )
        }

    </script>
</body>

</html>